<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./project/lib/element-plus.css">
    <script src="./project/lib/vue3.4.21.js"></script>
    <script src="./project/lib/element-plus.js"></script>
    <script src="./project/lib/axios.min.js"></script>
</head>
<style>
    .images{
        width:150px;
        height:150px;
        float:left;
    }
    .images img{
        width:150px;
        height:130px;
    }
</style>
<body>
    </pre>
    <div id="app">
       <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="dataForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
            <el-input v-model="dataForm.username" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="dataForm.password" placeholder="请输入姓名" />
        </el-form-item>
        <el-button @click="doLogin">登录</el-button>
      </el-form>

    </div>
    <script type="module">
        const service = axios.create({
            baseURL: 'http://127.0.0.1:8088',
            timeout: 10000,
            headers: { 
                'Content-Type': 'application/json;charset=UTF-8'
            }
        })
        

        var c = 0;
        const app = Vue.createApp({
            //响应式变量
            data(){
                return {
                    dataForm:{
                        username:'',
                        password:''
                    }
                }
            },
            //方法 
            methods:{
                doLogin(){
                    service.post("/api/login2", this.dataForm).then(
                        res=>{
                            console.log(res)
                        }
                    )
                }
            },
            //初始化事件
            mounted(){
                
            }
        }).use(ElementPlus).mount("#app");
    </script>

<pre>
  
</body>
</html>